<template>
  <!-- 管理员页面 -->
  <div class="userbox">
    <div class="addbox">
      <el-button size="mini" @click="handleEdit()">增加</el-button>
    </div>
    <div class="addbox">
      <el-input v-model="input" placeholder="请输入歌手名"></el-input>
      <span class="iconfont icon-sousuo"></span>
    </div>
    <el-table
      :data="
        administratorarr.slice(
          (currentPage - 1) * pagesize,
          currentPage * pagesize
        )
      "
      border
      style="width: 100%"
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
    >
      <el-table-column prop="id" label="id" width="180"> </el-table-column>
      <el-table-column prop="name" label="歌手名" width="180">
      </el-table-column>
      <el-table-column prop="information" label="基本信息"> </el-table-column>
      <el-table-column prop="brief" label="歌手简介"> </el-table-column>
      <el-table-column prop="picture" label="歌手照片">
        <template slot-scope="scope">
          <img :src="scope.row.picture" alt="" />
        </template>
      </el-table-column>
      <el-table-column prop="" label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[1, 2, 3, 4]"
      :page-size="pagesize"
      layout="total,sizes,  prev, pager, next, jumper"
      :total="totalCount"
    >
    </el-pagination>

    <!-- 弹出框 -->
    <el-dialog title="添加管理员" :visible.sync="dialogFormVisible">
      <el-form>
        <el-form-item label="账号" :label-width="formLabelWidth">
          <el-input autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色" :label-width="formLabelWidth">
          <el-input autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-select v-model="region" placeholder="请选择活动区域">
            <el-option label="可用" value="shanghai"></el-option>
            <el-option label="不可用" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //初始页
      currentPage: 1,
      // 每页数据
      pagesize: 2,
      totalCount: 0,
      input: "",
      region: "",
      formLabelWidth: "120px",
      dialogFormVisible: false,
      //初始页
      currentPage: 1,
      // 每页数据
      pagesize: 2,
      totalCount: 0,
      //用户管理数组
      // 管理员
      administratorarr: [
        {
          id: "1",
          name: "张杰",
          information: "内地男歌手",
          brief:
            "张杰，1982年12月20日出生，四川成都人，中国内地流行男歌手。2004年参加选秀节目《我型我秀》，以成名曲《北斗星的爱》出道。已发行10张唱片。2008年以来举办过8场爆满的个人演唱会，在各大权威音乐奖项中先后24次获得“最受欢迎男歌手”称号，2010年在韩国M-net亚洲音乐大赏(MAMA)上获得“亚洲之星”（Best Asian Artist），影响力触及海外。",
          picture:
            "https://p.ssl.qhimg.com/dmfd/120_120_100/t014dd2bd5dc97b4193.webp",
        },
        {
          id: "1",
          name: "林俊杰",
          information: "港澳台男歌手",
          brief:
            "2003年，发行首张创作专辑《乐行者》。2004年凭专辑《第二天堂》中的《江南》一曲成名。2014年以专辑《因你而在》夺得第25届台湾金曲奖最佳国语男歌手奖。2013年至2015年举办“时线Timeline世界巡回演唱会”和安可场“时线：新地球世界巡回演唱会”，唱遍4大洲、31个城市，刷新个人纪录 。2016年以专辑《和自己对话》再度获得第27届台湾金曲奖最佳国语男歌手奖， 并推出个人首部音乐纪录片《听·见林俊杰》。",
          picture:
            "https://p.ssl.qhimg.com/dmfd/120_120_80/t012642d00e662e8520.webp",
        },
      ],
    };
  },
  methods: {
    // 状态
    changeSwitch(data, b, index) {
      console.log(data);
      console.log(b);
      console.log(index);
    },

    // 每页显示几条
    handleSizeChange(val) {
      this.pagesize = val;
      //   this.getPackData(); //根据用户获取的每页显示页面数量显示页面
    },
    // 操作当前页
    handleCurrentChange(val) {
      this.currentPage = val;
      // this.getPackData();//获取用户点击的当前页后刷新页面数据
    },
    // 增加
    handleEdit() {
      console.log();
      this.dialogFormVisible = true;
    },
    // 删除
    handleDelete(index, row) {
      console.log(index, row);
    },
  },
  mounted() {
    //   计算总条数
    this.totalCount = this.administratorarr.length;
  },
};
</script>
<style scoped>
.addbox {
  display: flex;
  align-content: space-around;
  margin: 10px 10px 20px 10px;
  width: 300px;
}
.userbox {
  margin: 20px 20px;
  border-radius: 5px;
  padding: 10px 20px;
  box-sizing: border-box;
  background: white;
}
span {
  display: block;
  background: skyblue;
  height: 40px;
  width: 40px;
  line-height: 40px;
  margin-left: 20px;
  font-size: 20px;
  color: white;
  border-radius: 5px;
}
.addbox > input {
  margin-right: 10px;
}
</style>